<template>
  <div class="home">
    <!-- 头部 -->
    <van-nav-bar title="创业平台" />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/img/banner1.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/banner2.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/banner3.png" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 图标 -->
    <van-grid class="naver" :border="false">
      <van-grid-item v-for="(icon, index) in icons" :key="index">
        <img :src="icon" />
        <p>{{ titles[index] }}</p>
      </van-grid-item>
    </van-grid>
    <!--分割线  -->
    <div class="gap"></div>
    <!-- 标签页 -->
    <van-tabs v-model="active">
      <van-tab v-for="type in newsall" :key="type.id" :title="type.name">
        <router-link tag="div"  :to="/newsdetail/+item.id"  v-for="item in type.content" :key="item.id">
          <van-row>
            <van-col span="16">
              <h3 class="content" v-html="item.content"></h3>
              <p>{{ item.create_time }}</p>
            </van-col>
            <van-col span="8">
              <van-image width="100" height="100" :src="uploads + item.img" />
            </van-col>
          </van-row>
        </router-link>
      </van-tab>
    </van-tabs>

    <!-- 底部标签栏 -->
     <tab-btn></tab-btn>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import tabBtn from "../components/tabBtn";
export default {
  name: "Home",
  data() {
    return {
      active: 0,
      newsList: [],
      newsall: [],
    };
  },
  components: {
    tabBtn,
  },
  computed: {
    // ...mapState(['badge'])
    ...mapState({
      icons: (state) => state.badge.icon,
      titles: (state) => state.badge.title,
      uploads: (state) => state.uploads,
    }),
  },
  async created() {
    let res = await axios.get("/api/news/newsall");
    // let data = res.data;
    this.newsall = res.data.data;
    // console.log(res.data);
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__title {
  font-size: 20px;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  border-radius: 30px;
}

.naver img {
  width: 50px;
}

.gap {
  height: 5px;
  background: lightgray;
}
/deep/ .van-tabs__line {
  background-color: #2196f3;
}
/deep/ .van-col--8 {
  text-align: center;
}
/deep/ .van-tabs {
  padding-bottom: 50px;
}
/deep/ .van-row {
  border-bottom: 1px solid lightgray;
  padding: 10px;
}

.content{
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;/*设置对齐模式*/
-webkit-line-clamp:2;
}
</style>
